<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器</title>
</head>
<body>
    <button type="button" onclick="start()">开始</button>
    <button type="button" onclick="pause()">暂停</button>
    <div id="outer">
        <h1></h1>
    </div>
    <script>
        let count = 0;
        let h1 = document.querySelector("#outer>h1")
        let st;
        console.log(st)
        function start(){
            //如果此处没有将定时器对象放入到st中,那么只要执行start()
            //那么就在客户端浏览器创建若干个定时器对象,而这些定时器对象会累加执行.
            //为了让之前创建的定时器及时销毁,需要将定时器对象指向一个变量
            clearInterval(st);
            count = 0;
            st = setInterval(() => {
                h1.innerHTML = count++
                
            }, 1000);
        }
        function pause(){
            clearInterval(st)
        }
    </script>
</body>
</html>